<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
        <ui:composition template="commonLayout.xhtml">
            <ui:define name="content">
                <div class="main center">
                    <section class="part clearfix">
                        <header class="title clearfix">
                        </header>
                        <h:body>
                            <script type="text/javascript">
                                var flag = false;
                                function isDate(date) {
                                    if(date.match(/^[0-9]{4}\-(0[1-9]|1[012])\-(0[1-9]|[12][0-9]|3[01])/))
                                        return true;
                                    else
                                        return false;
                                }
        
                                function validateForm(){
                                    var from = document.getElementById("myform:from").value;
                                    var to = document.getElementById("myform:to").value;
                                    if(flag == true){
                                        return true;
                                    }
                                    else if (!isDate(from) || !isDate(to)) {
                                        alert("#{msg.availmsg}");
                                        return false;
                                    }
                                    else {
                                        flag = true;
                                        return true;
                                    }
                                }
                            </script>
                            <h:form id="myform" onsubmit="return validateForm();">
                                <h3><h:outputText value="#{msg.appavail}"/></h3>
                                <p>
                                    <h:outputText value="#{msg.avail}"/> (yyyy-mm-dd)<br/>
                                    <h:inputText id="from" value="#{applicantmanager.fromAvail}"><f:validator validatorId="checkavailability" /></h:inputText>
                                    <br/><h:outputText value="#{msg.avail}"/> (yyyy-mm-dd)<br/>
                                    <h:inputText id="to" value="#{applicantmanager.toAvail}"><f:validator validatorId="checkavailability" /></h:inputText>
                                </p>
                                <p>
                                    <h:commandButton type="submit" id="add" value="#{msg.add}" action="#{applicantmanager.addAvailability}"/><br /><br />
                                    <h:commandButton type="submit" id="next" value="#{msg.next}" action="#{applicantmanager.nextPage3}"/>
                                </p>
                                <p>
                                    <h:outputText value="#{applicantmanager.availabilitystring}" escape="false" />
                                </p>
                            </h:form>
                            <h:form>
                                <h:commandButton value="#{msg.cancel}" action="#{applicantmanager.cancel}" />
                            </h:form>
                        </h:body>
                    </section>
                </div>
            </ui:define>
        </ui:composition>
</html>
